<template>
    <div class="upload" :class="spread && 'spread'">
        <div @click="handleClick" :style="spread && 'display: block;height: 100%;width: 100%;'">
             <div class="ivu-btn ivu-btn-primary ivu-btn-default ivu-btn-large" v-show="!spread">{{text}}</div>
             <div v-show="spread"></div>
        </div>
        <input type="file" name="image" ref="file"  @change="upload($event)" id="image" :accept="accept" :multiple="multiple" :disabled="banUpload" style="display: none" />
    </div>
</template>

<script>
    import {uploadImage,uploadToken} from 'api/uploadImage'
    export default {
        name: 'upload', 
        data(){
            return {
            }
        },
        methods: {
            handleClick(){
                this.$refs.file.click()
            },
            upload(e){
                let fileArr = Array.from(e.target.files)
                if(fileArr.length>9){
                    this.$Message.error('上传的图片不能超过9张')
                    return;
                }
                for(let i = 0; i < fileArr.length; i++){
                   if(fileArr[i].size > 1000000) {
                       this.$Message.error('上传的图片不能超过1M')
                       return;
                   }
                }
                let success = []
                let fail = []
                
                if(!fileArr.length) { return; }
                this.$Loading.start()

                new Promise((resolve, reject) => {
                    let fun = () => {
                        if(!fileArr.length){ resolve('uploadComplete'); return; }
                        let pop = fileArr.shift()
                        
                        uploadImage(pop, this.w_h).then(url => {
                            success.push(url)
                        }).catch(err => {
                            fail.push(err)
                        }).finally(() => {
                            fun()
                        })
                    }
                    fun()
                }).then(d => {
                    this.$Loading.finish()
                    if(fail.length){
                        this.$Message.warning(`${success.length}张上传成功,${fail.length}张上传失败，原因：${fail[0].message}`);
                    } else{
                        this.$Message.success(`${success.length}张上传成功`)
                    }

                    this.$emit('confirmUpload', success)
                    // this.$emit('confirmUploadCopy', success)
                    // console.log(success, fail)
                })
            },
        },
        props: {
            // 是否禁止上传
            banUpload:{
                type: Boolean,
                default: false
            },
            // 是否支持多选
            multiple: {
                type: Boolean,
                default: false
            },
            // 上传图片文案
            text: {
                type: String,
                default: '上传图片'
            },
            // 是否铺满父级
            spread: {
                type: Boolean,
                default: true
            },
            accept: {
                type: String,
                default: 'image/gif, image/jpeg, image/png, image/jpg'
            }
        }
    }
</script>

<style scoped>
    .spread{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
        left: 0;
        top: 0
    }
</style>